<!-- 首页 -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import NavigationBar from '@/components/NavigationBar.vue'

let n = ref(0)
window.addEventListener('scroll', () => {
  n.value = document.documentElement.scrollTop
})
onMounted(() => {})
</script>

<template>
  <div class="common-layout">
    <NavigationBar></NavigationBar>
    <el-main class="wrapper">
      <div class="fontBox">
        <div>行业软件定制及解决方案提供商</div>
        <div>
          <div>网页定制</div>
          <div>小程序定制</div>
        </div>
        <div>
          <el-button>免费获取报价</el-button>
        </div>
      </div>
    </el-main>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  // 因为可视窗口的放大缩小会改变网页大小，而这里依赖的父级宽度就是网页大小，会造成出现空白区域，所以需要设置一个最小宽度
  min-width: 1270px;
  height: 800px;
  background: url('https://images.unsplash.com/photo-1727852290479-16572acb4bdb?q=80&w=2564&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
    no-repeat 0 80% / cover;
  ::-webkit-scrollbar {
    display: none;
  }
  .el-main {
    height: 725px;
    color: #eeeeee;
    .fontBox {
      box-sizing: border-box;
      width: 650px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 300px;
      margin-left: 310px;
      > div {
        &:nth-child(1) {
          font: 40px/80px '楷体';
        }
        &:nth-child(2) {
          width: 354px;
          font: 24px/40px '楷体';
          display: flex;
          justify-content: space-between;
        }
        &:nth-child(3) {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .el-button {
            width: 354px;
            height: 40px;
            font: 24px/40px '楷体';
            background-color: red;
            color: #eeeeee;
          }
        }
      }
    }
  }
}
</style>
